<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-input size="mini" v-model="formInline.user" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item class="dateStyle">
            <el-col :span="11">
              <el-date-picker size="mini" value-format="yyyy-MM-dd" type="date" placeholder="开始日期" v-model="formInline.startTime" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center">--</el-col>
            <el-col :span="11">
              <el-date-picker size="mini" value-format="yyyy-MM-dd" type="date" placeholder="结束日期" v-model="formInline.endTime" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          border
          size="mini"
          style="width: 100%">
          <el-table-column
            align="center"
            prop="CREATEUSERNAME"
            label="用户名">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="LOGIP"
                  label="IP地址">
          </el-table-column>
          </el-table-column>
          <el-table-column
            align="center"
            prop="LOGCONTENT"
            label="操作">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="LOGTYPE"
                  label="操作类型">
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATETIME"
            label="操作时间">
            <template slot-scope="scope">
              <div>
                {{new Date(scope.row.CREATETIME).toLocaleString()}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "systemLog",
    data() {
      return {
        formInline: {},
        pagination: {
          pageSize: 20,
          total: 1,
          pageNo: 1
        },
        tableData: []
      }
    },
    created() {
      this.getData(this.pagination.pageSize, this.pagination.pageNo);
    },
    methods: {
      search() {
        this.$post(`/public/findLog`, {
          id: this.$store.state.userMessage.id,
          pageSize:this.pagination.pageSize,
          pageNo: 1,
          userName: this.formInline.user,
          startTime: this.formInline.startTime,
          endTime: this.formInline.endTime
        }).then(res => {
          if(res.data.status != 1) {
            this.$message.error('条件输入错误，请检查');
            return;
          }
          this.pagination.total = res.data.data.total;
          this.tableData = res.data.data.dataList;
        })
      },
      getData(pageSize,pageNo) {
        this.$post(`/public/findLog`, {id: this.$store.state.userMessage.id,pageSize,pageNo}).then(res => {
          this.pagination.total = res.data.data.total;
          this.tableData = res.data.data.dataList;
        })
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.getData(size, this.pagination.pageNo);
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.getData(this.pagination.pageSize, page);
      }
    }
  }
</script>

<style scoped lang="scss">
  .dateStyle{
    /deep/.el-input__inner {
      padding-left: 30px !important;
    }
  }
</style>
